<!-- 舌苔采集页面 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
  <link rel="stylesheet" href="../res/css/weui.css" />
  <link rel="stylesheet" href="../res/css/weuix.css" />
  <link rel="stylesheet" href="../res//css/common.css" />
  <link rel="stylesheet" href="../res/css/swiper.css" />
  <script src="../res/js/zepto.min.js"></script>
  <script src="../res/js/zepto.weui.js"></script>
  <script src="../res/js/common.js?v=1"></script>
  <script src="../res/js/swiper.js"></script>
</head>
<style>
  .careful {
    width: 60%;
    margin-left: calc(20%);
    margin-top: 80px;
    display: flex;
    cursor: pointer;
  }

  canvas {
    image-rendering: pixelated;
  }

  .careful p {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #353535;
    line-height: 24px;
  }

  .carefulIOS {
    width: 60%;
    margin-left: calc(20%);
    margin-top: 80px;
    display: flex;
    cursor: pointer;
  }

  .carefulIOS p {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #353535;
    line-height: 24px;
  }

  #takePhoto {
    width: 100%;
    position: relative;
    background-color: black;
  }

  #takePhotoIOS {
    width: 100%;
    position: relative;
    background-color: black;
  }

  .img_camera {
    width: 40px;
    height: 40px;
    left: calc(5%);
    top: 25px;
    position: absolute;
  }

  .img_signal_tongue {
    width: 40px;
    height: 40px;
    right: calc(5%);
    top: 25px;
    position: absolute;
  }

  .img_tongue {
    width: 60%;
    position: absolute;
    height: 300px;
    opacity: 0.3;
    z-index: 500;
    margin-left: calc(20%);
    margin-top: 50px;
  }

  #video {
    width: 100%;
    position: absolute;
    height: 350px;
  }
</style>
<script>
  $(function () {
    var isMobile = {
      Android: function () {
        return navigator.userAgent.match(/Android/i) ? true : false;
      },
      Ios: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
      },
      BlackBrrey: function () {
        return navigator.userAgent.match(/BlackBrrey/i) ? true : false;
      },
      Windows: function () {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
      },
      any: function () {
        return (
          isMobile.Android() ||
          isMobile.Ios() ||
          isMobile.BlackBrrey ||
          isMobile.Windows()
        );
      },
    };
    if (isMobile.Ios()) {
      //如果是苹果系统，就选择拍照功能
      $("#takePhoto").hide();
      $("#capture").hide();
      $(".careful").hide();
      console.log("ios");
    } else {
      //执行其余手机系统的代码
      console.log("isAndroid");
      $("#captureIOS").hide();
      $(".carefulIOS").hide();
      $("#takePhotoIOS").hide();
      $("#take-picture").hide();
    }
    //安卓的写法
    $("#btnBack").click(function () {
      goPage("user_physical_examin.htm");
    });
    var video = document.getElementById("video"); //video元素
    var canvas = document.getElementById("canvas"); //canvas元素
    var context = canvas.getContext("2d");
    var index = 0;

    //摄像拍照
    function capture() {
      var constraintsList = [{
          video: {
            facingMode: "user",
          },
        },
        {
          video: {
            facingMode: {
              exact: "enviroment",
            },
          },
        },
      ];
      //constraints参数
      const constraints = constraintsList[index];
      console.log(constraints);
      //成功的回调函数
      function success(stream) {
        //兼容的webkit核心浏览器
        var CompatibleUrl = window.URL || window.webkitURL;
        //将视频流内容设置为video元素的源(注意：此处因为使用的是比较新的浏览器，必须直接设置，否则报错)
        //如果使用的不是较新的浏览器，可以这样设置：video.src = CompatibleUrl.createObjectURL(stream)
        video.srcObject = stream;
        video.play();
      }
      //异常的回调函数
      function error(error) {
        console.log("访问媒体设备失败", error.name, error.message);
      }
      //访问用户媒体设备的兼容方法
      function getUserMedia(constrains, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices
            .getUserMedia(constrains)
            .then(success)
            .catch(error);
        } else if (navigator.webkitGetUserMedia) {
          navigator.webkitGetUserMedia(constrains, success, error);
        } else if (navigator.mozGetUserMedia) {
          navigator.mozGetUserMedia(constrains, success, error);
        } else if (navigator.getUserMedia) {
          navigator.getUserMedia(constrains, success, error);
        }
      }
      if (
        navigator.mediaDevices.getUserMedia ||
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia
      ) {
        //调用用户媒体设备，访问摄像头
        getUserMedia(constraints, success, error);
      } else {
        alert("你的浏览器不支持访问用户媒体设备");
      }
    }

    capture();
    //绑定拍照按钮的单击事件
    $("#capture").click(function () {
      context.drawImage(video, 0, 0);
      var dataURL = canvas.toDataURL("image/jpeg", 0.5);
      localStorage.setItem("tonguePhoto", dataURL.split(",")[1]);
      $.showLoading();
      $(".weui-toast_content").text("照相中");
      setTimeout(function () {
        $.hideLoading();
        msgInfo("拍照成功");
        $("#video").hide()
        setTimeout(() => {
          goPage("user_question_invest.htm");
        }, 1000);
      }, 2000);
      console.log(dataURL);
      //绑定切换摄像头的方向
    });

    function toggleCutover() {
      if (index == 0) {
        index = 1
      } else {
        index = 0
      }
      console.log(constraintsList[index]);
    }
    $(".img_camera").click(function () {
      toggleCutover();
      capture();
    });

    //IOS部分代码
    //IOS部分代码
    $("#showPhoto").hide();
    $("#take-picture").change(function (event) {
      $("#showPhoto").show();
      // 获得图片文件的引用
      var files = event.target.files,
        file;
      console.log(files);
      if (files && files.length > 0) {
        file = files[0];
        // 获取到img元素
        var showPicture = document.querySelector("#showPhoto");
        var reader = new FileReader();
        reader.onload = function (e) {
          getImg(this.result);
        };
        reader.readAsDataURL(this.files[0]);
        var getImg = function (res) {
          $.showLoading();
          $(".weui-toast_content").text("照相中");
          showPicture.src = res;
          localStorage.setItem("tonguePhoto", res.split(",")[1]);
          console.log(res.split(",")[1]);
          setTimeout(function () {
            $.hideLoading();
            msgInfo("拍照成功");
            setTimeout(() => {
              goPage("user_question_invest.htm");
            }, 1000);
          }, 1000);
        };
      }
    });
  });
</script>

<body>
    <div class="fix-top" style="z-index: 100;">
        <div class="weui-btn_primary weui-header">
            <div class="weui-header-left"><a id="btnBack" class="icon icon-109 "></a></div>
            <h1 class="weui-header-title">舌苔采集</h1>
        </div>
    </div>
    <div id="takePhoto">
        <img src="../res/images/icon_camera.png" alt="" class="img_camera">
        <img src="../res/images/img_signal_tongue.png" alt="" class="img_signal_tongue">
        <img src="../res/images/img_tongue.png" class="img_tongue" alt="">
        <video id="video" style="width: 100%;height: 320px;position: absolute;height: 350px;" autoplay></video>
        <canvas id="canvas" style="position: absolute;width:100%;height: 350px;"></canvas>
    </div>
  </div>

  <!-- 安卓显示 -->
  <div id="takePhoto">
    <img src="../res/images/icon_camera.png" alt="" class="img_camera" style="z-index: 999" />
    <img src="../res/images/img_signal_tongue.png" alt="" class="img_signal_tongue" style="z-index: 999" />
    <img src="../res/images/img_tongue.png" class="img_tongue" alt="" />
    <video id="video" autoplay muted style="
          position: absolute;
          width: 62%;
          height: 370px;
          margin: 0px 22% 0 20%;
        "></video>
    <canvas id="canvas" width="700" height="740" style="
    position: absolute;
    width: 350px;
    height: 370px;
    margin: 20px 22% 0 20%;
  "></canvas>
    <!-- IOS -->
    <!-- <input type="file" id="take-picture" accept="image/*"> -->
  </div>
  <a class="weui-btn bg-blue" id="capture" style="width: 70%; background-color: #1189ff; margin-top: 400px">舌苔采集</a>
  <div class="careful">
    <div class="icon">
      <img src="../res/images/icon_tips.png" alt="" style="width: 41px; height: 41px" />
    </div>
    <div class="message">
      <p>1.请尽量将舌头置于框中,并尽量深处舌头</p>
      <p>2.保持不动，点击舌苔采集</p>
      <p>2.采集完成后进行问诊</p>
    </div>
  </div>

  <!-- IOS -->
  <div id="takePhotoIOS">
    <img src="../res/images/icon_camera.png" alt="" class="img_camera" style="z-index: 999" />
    <img src="../res/images/img_signal_tongue.png" alt="" class="img_signal_tongue" style="z-index: 999" />
    <img src="../res/images/img_tongue.png" class="img_tongue" alt="" />
    <img id="showPhoto" alt="" style="
          position: absolute;
          width: 65%;
          height: 350px;
          margin: 10px 22% 0 18%;
        " />
    <!-- IOS -->
    <!-- <input type="file" id="take-picture" accept="image/*"> -->
  </div>
  <input type="file" accept="image/*" capture="camera" id="take-picture" style="
        width: 60%;
        position: absolute;
        background-color: #1189ff;
        top: 450px;
        left: 20%;
        height: 40px;
      " />
  <a class="weui-btn bg-blue" id="captureIOS" style="
        width: 70%;
        background-color: #1189ff;
        margin-top: 400px;
        pointer-events: none;
      ">点击照相,进行舌苔采集</a>
  <div class="carefulIOS">
    <div class="icon">
      <img src="../res/images/icon_tips.png" alt="" style="width: 41px; height: 41px" />
    </div>
    <div class="message">
      <p>1.请尽量将舌头置于框中,并尽量深处舌头</p>
      <p>2.保持不动，点击舌苔采集</p>
      <p>2.采集完成后进行问诊</p>
    </div>
  </div>
</body>

</html>